
<template>
	<div>
		<el-table ref="multipleTable" :data="tableData.filter(data => !search || data.projectname.toLowerCase().includes(search.toLowerCase()))"
		 tooltip-effect="dark" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" block class="table-expand">
						<el-form-item label="大学名称">
							<span>{{ props.row.university }}</span>
						</el-form-item>
						<el-form-item label="二级学院">
							<span>{{ props.row.college }}</span>
						</el-form-item>
						<el-form-item label="赛事名称">
							<span>{{ props.row.competitionName }}</span>
						</el-form-item>
						<el-form-item label="赛事等级">
							<span>{{ props.row.competitionGrade }}</span>
						</el-form-item>
						<el-form-item label="联系电话">
							<span>{{ props.row.phone }}</span>
						</el-form-item>
						<el-form-item label="联系QQ">
							<span>{{ props.row.qq }}</span>
						</el-form-item>
						<el-form-item label="项目名称">
							<span>{{ props.row.projectname }}</span>
						</el-form-item>
						<el-form-item label="项目截至日期">
							<span>{{ props.row.projectValidDate }}</span>
						</el-form-item>
						<el-form-item label="项目进度">
							<span v-if="props.row.projectProgrees === 0">启动</span>
							<span v-if="props.row.projectProgrees === 1">规划</span>
							<span v-if="props.row.projectProgrees === 2">实施</span>
							<span v-if="props.row.projectProgrees === 3">收尾</span>
						</el-form-item>
						<el-form-item label="团队现有人数">
							<span>{{ props.row.curPersonNum }}</span>
						</el-form-item>
						<el-form-item label="团队总需人数">
							<span>{{ props.row.TotalPresonNum }}</span>
						</el-form-item>
						<el-form-item label="团队招募需求">
							<span>{{ props.row.projectNeed }}</span>
						</el-form-item>
						<el-form-item label="项目简介">
							<rich-text :nodes="props.row.projectIntro | $_base64toUtf8"></rich-text>
						</el-form-item>
						<el-form-item label="招募需求技术类型">
							<span>{{ props.row.skillType.join(",") }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="日期" width="120">
				<template slot-scope="scope">{{ scope.row.time | $_formatDate }}</template>
			</el-table-column>
			<el-table-column prop="projectname" label="项目名称" show-overflow-tooltip width="120">
			</el-table-column>
			<el-table-column prop="competitionName" label="比赛名称" width="120" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="组队状态" width="120" show-overflow-tooltip>
				<template slot-scope="scope">{{ scope.row.TotalPresonNum === scope.row.curPersonNum ? "完成组队" : "组队中" }}</template>
			</el-table-column>
			<el-table-column prop="competitionGrade" label="比赛等级">
			</el-table-column>
			<el-table-column label="项目状态" width="120">
				<template slot-scope="scope">{{ scope.row.checkValidDate === 1 ? '进行中' : '已结束' }}</template>
			</el-table-column>
			<el-table-column prop="phone" label="联系电话">
			</el-table-column>
			<el-table-column prop="qq" label="联系QQ">
			</el-table-column>
			<el-table-column align="right">
				<template slot="header" slot-scope="scope">
					<el-input v-model="search" size="mini" placeholder="输入项目名称搜索" />
				</template>
				<template slot-scope="scope">
					<!-- 已经创建的项目 -->
					<el-tag v-if="finishCreateProjectsID.indexOf(scope.row._id)!==-1" type="success">已创建</el-tag>
					
					<!-- 不是编辑的情况下可以选择 -->
					<el-switch 
						v-else
						@change="switchChange(scope.$index,scope.row)" 
						:disabled="!(!createProjectData._id)"
						:value="scope.$index === curSwicth || !(!(createProjectData.project && (scope.row._id === createProjectData.project._id)))" 
						active-color="#13ce66"
						inactive-color="#cccccc">
					</el-switch>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {mapState,mapMutations} from "vuex";
	export default {
		data() {
			return {
				search: '',
				tableData: [],
				multipleSelection: [],
				finishCreateProjectsID:[],
				curSwicth: -1,
				curProjectID:""
			}
		},
		computed: {
			...mapState(['relevanceUserID','createProjectData'])
		},
		watch: {
			relevanceUserID(newVal, oldVal) { //userID 状态变化时获取数据
				this.curPageData();
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				if (vm.relevanceUserID !== -1) { //已经关联 vuex状态已改变 组件变化 获取数据
					vm.curPageData();
				}
			})
		},
		methods: {
			...mapMutations(['createProject']),
			async curPageData() {
				let res = await this.$network({
					cloudName: this.$partnerOnlineCloud,
					api: "getMyTeam",
					data: {
						userID: this.relevanceUserID
					}
				})
				if (res.status === 0) {
					this.tableData = res.data;
				}
				
				// 获取当前我已经创建的项目（包括过期的）
				let res1 = await uniCloud.callFunction({
					name:'getFinishCreateProject',
					data:{
						userID: this.relevanceUserID
					}
				})
				
				if(res1.result.status === 0){
					res1.result.data.forEach(item=>{
						this.finishCreateProjectsID.push(item.project._id);
					})
				}
			},
			switchChange(index, row) {
				let {curSwicth} = this;
				if (curSwicth === index) { // 取消
					this.createProject({
						key: 'project',
						val: -1
					})
					this.curSwicth = -1;
				} else if (curSwicth !== index) { //选中
					row.projectIndex = index;
					if (row.checkValidDate === -1 || !row.isFull) {
						let tipInfo = `该项目${row.checkValidDate === -1 ? '已经过期' : ''}${!row.isFull ? '尚未完成组队' : ''}确认选择吗?`
						this.$alert(tipInfo, '提示', {
							confirmButtonText: '确定',
							cancelButtonText: "取消",
							showCancelButton: true,
							type: 'warning',
							callback: action => {
								if (action === 'confirm') {
									this.createProject({
										key: 'project',
										val: row
									});
									this.curSwicth = index;
								}
							}
						})
					} else {
						this.createProject({
							key: 'project',
							val: row
						});
						this.curSwicth = index;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.table-expand {
		font-size: 0;
	}

	.table-expand {
		.el-form-item {
			color: #CCCCCC !important;

			.el-form-item__label {
				width: 90px;
				color: $uni-text-color !important;
			}
		}
	}

	.table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 80%;
	}
</style>
